<template>
  <div class="systems-page-wrapper">
    <div v-show="!isSystemDetail" :style="{ display: 'flex', flexFlow: 'row wrap' }">
      <el-card
        v-for="system in systems"
        :key="system.id"
        shadow="hover"
        :style="{ cursor: 'pointer', width: '260px', height: '200px', marginRight: '10px' }"
        @click="onClickSystem(system.id!)"
      >
        <template #header>
          <el-text size="large" tag="b" truncated>{{ system.name }}</el-text>
        </template>
        {{ system.description }}
      </el-card>
      <el-card
        shadow="hover"
        :style="{ cursor: 'pointer', width: '260px', height: '200px', marginRight: '10px' }"
        :body-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', padding: 0 }"
      >
        <el-icon><Plus /></el-icon>
      </el-card>
    </div>
    <div v-show="isSystemDetail"><router-view /></div>
  </div>
</template>

<script lang="ts" setup>
import { useProjectService } from '@/service/project-service';
import { useSystemService } from '@/service/system-service';
import { System } from '@/store/system-repository';
import { Plus } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const projectService = useProjectService();
const systemService = useSystemService();

const onClickSystem = (systemId: string) => {
  router.push({ name: 'SystemMetrics', params: { systemId } });
};

const isSystemDetail = computed(() => {
  return systemService.getIsSystemDetail(route.name);
});

// 系统中的应用
const systems = ref<Array<System>>([]);

const loadSystems = (projectId: string) => {
  projectService.systems(projectId).then(data => {
    systems.value = data.records ?? [];
  });
};

watch(
  () => {
    return route.params.projectId as string | undefined;
  },
  newProjectId => {
    if (newProjectId) {
      loadSystems(newProjectId);
    }
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.systems-page-wrapper {
  margin-top: 10px;
}
</style>
